<template>
  <div class="loanapply bbg">
    <div class="tip"> 您的信息我们将严格保密，请放心填写。</div>
    <div class="midbox">
      <div class="tt">个人信息填写</div>
      <mt-field label="姓名" placeholder="请输入您的姓名" v-model="form.pname" @blur.native.capture="changeBlur()"></mt-field>
      <mt-field label="联系方式" placeholder="请输入您的手机号码" v-model="form.pphone" :attr="{maxlength: 11}" @blur.native.capture="changeBlur()"></mt-field>
      <mt-field label="身份证" placeholder="请输入您的身份证" ref="pid" @focus="iptblur('pid',1)" v-model="form.pid" readonly="readonly"></mt-field>
      <div class="rangepicker">
        <div>有效期</div>
        <input type="text" placeholder="开始日期" ref="pidvds" @focus="iptblur('pidvds',0)" v-model="form.pidvds" readonly="readonly" @click="$refs.picker1.open()"/>
        - &nbsp;&nbsp;
        <input type="text" placeholder="结束日期" ref="pidvde" @focus="iptblur('pidvde',0)" v-model="form.pidvde" readonly="readonly" @click="$refs.picker2.open()"/>

      </div>
      <mt-field label="银行卡号" type="number" placeholder="请输入您常用银行卡[借记卡]" v-model="form.bnum" @blur.native.capture="changeBlur()">
        <!-- <img :src="require('@img/qust.png')" class="qust" @click="$router.push('/BankList')"/> -->
      </mt-field>
      <mt-field label="地区" placeholder="请选择工作单位所在区域" ref="paddr" @focus="iptblur('paddr',1)" v-model="form.paddr.text" readonly disable-clear
                @click.native="addrShow = true">
        <!-- <img :src="require('@img/select.png')" class="selt" :class="{active:addrShow}"/> -->
      </mt-field>
      <mt-field label="公积金类型" placeholder="省/市公积金" ref="gjj" @focus="iptblur('gjj',1)" v-show="gjjshow" v-model="form.gjj.text" readonly disable-clear 
        @click.native="addGjj = true">
        <!-- <img :src="require('@img/select.png')" class="selt" :class="{active:addGjj}"/> -->
      </mt-field>
      <mt-field label="公积金类型" placeholder="市/工业园区公积金" ref="gjjSZ" @focus="iptblur('gjjSZ',1)" v-show="gjjSZshow" v-model="form.gjjSZ.text" readonly disable-clear
                @click.native="addGjjSZ = true">
        <!-- <img :src="require('@img/select.png')" class="selt" :class="{active:addGjjSZ}"/> -->
      </mt-field>
      <mt-field label="验证码" placeholder="请输入6位验证码" type="number" v-model="form.vcode" @blur.native.capture="changeBlur()">
        <div class="getCode" @click="getCode" :class="{active:sendMsg}">{{smTxt}}</div>
      </mt-field>
      <mt-field label="推荐人" v-show="isRecom==true" readonly="readonly" placeholder="请输入推荐人工号(选填)" v-model="form.pplz" @blur.native.capture="changeBlur()"></mt-field>
      <mt-field label="推荐人" v-show="isRecom!=true" placeholder="请输入推荐人工号(选填)" v-model="form.pplz" @blur.native.capture="changeBlur()"></mt-field>
    </div>
    <div class="agrment">
      <i :class="{active:checkArg}" @click="openread3"></i>
      我已阅读同意
      <span @click="openread1">《公共服务信息查询授权书》</span>、
      <span @click="openread2">《南京银行个人征信查询授权书》</span>
    </div>
    <div class="blowBtn active"  @click="goNext">下一步</div>
    <!--下拉弹出框-->
    <mt-datetime-picker
      ref="picker1" v-model="pidvds" type="date" @confirm="picker1Confirm" :startDate="new Date('1919')"
      :endDate="new Date('2020')"
      year-format="{value} 年" month-format="{value} 月" date-format="{value} 日">
    </mt-datetime-picker>
    <mt-datetime-picker
      ref="picker2" v-model="pidvde" type="date" @confirm="picker2Confirm" :startDate="new Date('2019')"
      :endDate="new Date('2119')"
      year-format="{value} 年" month-format="{value} 月" date-format="{value} 日">
    </mt-datetime-picker>
    <!-- <mt-popup v-model="addrShow" position="bottom" class="mint-popup mtpicker">
      <mt-picker :slots="addressSlots" :visible-item-count="5" :show-toolbar="true" ref="picker3" value-key="text">
        <span @click="setAddr" class="sure">完成</span>
      </mt-picker>
    </mt-popup>
    <mt-popup v-model="addGjj" position="bottom" class="mint-popup mtpicker">
      <mt-picker :slots="addGjjList" :visible-item-count="5" :show-toolbar="true" ref="picker4" value-key="text">
        <span @click="setGjj" class="sure">完成</span>
      </mt-picker>
    </mt-popup>
    <mt-popup v-model="addGjjSZ" position="bottom" class="mint-popup mtpicker">
      <mt-picker :slots="addGjjSZList" :visible-item-count="5" :show-toolbar="true" ref="picker5" value-key="text">
        <span @click="setGjjSZ" class="sure">完成</span>
      </mt-picker>
    </mt-popup> -->
  </div>
</template>

<script>
  import Vue from "vue";
  import CryptoJS from "crypto-js";
  import Unils from "@/utils/encrypt.js";
  import myStore from '@/pages/store'; 
  export default {
    name: "preApplication",
    data() {
      return {
        form: {
          pname: '',
          pphone: '',
          pid: '',
          pidvds: '',
          pidvde: '',
          bnum: '',
          paddr: '',
          gjj:'',
          gjjSZ:'',
          vcode: '',
          pplz: '',
        },
        pidvds:new Date('1990'),
        pidvde:new Date('2019'),
        addrShow: false,
        addGjj:false,
        addGjjSZ:false,
        gjjshow:false,
        gjjSZshow:false,
        addressSlots: [],
        addGjjList: [{values:[
          {
            value: '1',
            text: '市公积金'
          }, {
            value: '2',
            text: '省公积金'
          }
        ]}],
        addGjjSZList: [{values:[
          {
            value: '3',
            text: '工业园区公积金'
          }, {
            value: '1',
            text: '市公积金'
          }
        ]}],
        sendMsg: false,
        smTxt: "获取验证码",
        checkArg: false,
        read1: false,
        read2: false,
        k11:"",
        k12:"",
        k13:"",
        k14:"",
        serverDate:"",
        isRecom:"",
        activitySmallImg:"",
      };
    },
    mounted() {
      this.getTime();  
      this.$setStore("appAccessToken","f58e476f5ba2d3352b9cb2d567ff6d75")
      this.$setStore("appID","0f89cfb8_8bb9_4017_b54d_5e7c32f28a42")
    },
    methods: {
       getTime(){
        let that = this;
        let k = Unils.getRandomKey(16);
        let iv = "";
        let msgReq = {};
        let reqData = {};
        reqData.format = "yyyy-MM-dd hh-mm-ss";
        reqData.appAccessToken = that.$getStore("appAccessToken");
        let reqEnc = Unils.encrypt(JSON.stringify(reqData), k, iv); 
        let keyEnc = Unils.getRsa(CryptoJS.enc.Utf8.stringify(k));
        msgReq.reqData = reqEnc;
        msgReq.key = keyEnc;
        msgReq.appID = that.$getStore("appID");
        msgReq.appAccessToken = that.$getStore("appAccessToken");
         that.$http
          .post(myStore.BaseUrl+"/sdk/ESB/SDKGetTime",JSON.stringify(msgReq))
          .then(function (response) {
            let resp = response.data;
            if (resp.returnCode == "000000") {
              let re = Unils.decrypt(resp.rspData, k, iv);
              let data = JSON.parse(re);
              let arrTime = data.serverTime.split(" ");
              that.$setStore("serverDate",arrTime[0])//获取服务器日期（年月日）
              that.serverDate = that.$getStore("serverDate");
            } else {
              that.$messagebox("温馨提示", resp.returnMsg);
            }
          })
          .catch(function (error) {

          });
      },
      getCode(){
        alert('发送')
      },
      openread3(){
        alert("openread3")
      },
      openread1(){
        alert("openread1")
      },
      openread2(){
        alert("openread2")
      },
      goNext(){
        alert("跳转下一页")
      },
      picker1Confirm(){
        alert("picker1Confirm")
      },
      picker2Confirm(){
        alert("picker2Confirm")
      },
      //ios键盘打开页面上移问题
    changeBlur(){
      let u = navigator.userAgent, app = navigator.appVersion;
      let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
      if(isIOS){
        setTimeout(() => {
          const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0
          window.scrollTo(0, Math.max(scrollHeight - 1, 0))
          }, 200)
      }
    },
    //ios readonly不生效问题
    iptblur(v,t){
      if(t===0){
        console.log(this.$refs[v])
        this.$refs[v].blur()
      }else{
        this.$refs[v].$el.children[1].children[1].children[0].blur()
      }
    },


    }
  };
</script>

<style scoped>
.readcon1,.readcon2{margin:-20vw 0 30vw; font-size: 3.2vw; padding: 0 5vw;}
.readcon1 h3,.readcon2 h3{font-weight: normal; font-size: 3.2vw; text-align: center;margin-bottom: 2vw;}
.readcon1 p,.readcon2 p{text-indent: 2em;}
.readcon1 span{text-decoration: underline}
</style>
